<template>
  <div class="password-edit page" ref="webview">
    <div ref="wrapper">
      <van-nav-bar class="bg_white" :title="type === 1 ? '修改密码': '支付密码'" left-arrow @click-left="$router.go(-1)" />
      <div class="text" v-if="type===1">请先输入原登录密码进行验证</div>
      <div class="text" v-if="type===2 && userInfo.isSetPayPass===0">您未设置支付密码,请先设置支付密码'</div>
      <div class="password">
        <template v-if="type === 1">
          <van-field v-model.number="form.oldPass" clearable :maxlength="type === 2?6:20" type="password" input-align="right" label="原密码" placeholder="请输入原登录密码" />
          <van-field v-model="form.password" :maxlength="type === 2?6:20" clearable input-align="right" type="password" label="新密码" placeholder="请输入新密码" />
          <van-field v-model="confPass" :maxlength="type === 2?6:20" clearable input-align="right" type="password" label="确认密码" placeholder="请确认新密码" />
        </template>
        <template v-else>
          <van-field v-model.number="form.oldPass" v-if="userInfo.isSetPayPass===1" clearable :maxlength="type === 2?6:20" type="password" input-align="right" label="原密码" placeholder="请输入原登录密码" />
          <van-field v-model="form.password" :maxlength="type === 2?6:20" clearable type="password" input-align="right" label="支付密码" placeholder="请输入支付密码" />
          <van-field v-model="confPass" :maxlength="type === 2?6:20" clearable label-width="95" type="password" input-align="right" label="确认支付密码" placeholder="请确认支付密码" />
        </template>
      </div>
      <div class="addCard">
        <van-button class="btn" round :loading="isLoading" @click.native="submitEdit">提 交</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'passwordEdit',
  data () {
    return {
      text: '',
      isLoading: false,
      disable: true,
      confirmPpassword: '',
      colde: '',
      codeText: '发送验证码',
      count: '',
      timer: null,
      confPass: '',
      form: {
        oldPass: '',
        password: '',
        type: this.$route.query.type + '' // 密码类型
      }
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(['userInfo']),
    type () {
      return parseInt(this.$route.query.type);
    }
  },
  methods: {
    submitEdit () {
      if (this.isLoading) {
        return;
      }
      var _account = this.form.oldPass + '';
      var _password = this.form.password + '';
      if (this.userInfo.isSetPayPass === 1) {
        if (!_account) {
          this.$toast('旧密码不能为空');
          return;
        }
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (!this.confPass) {
        this.$toast('确认密码不能为空');
        return;
      }
      if (this.form.password !== this.confPass) {
        this.$toast('两次密码输入的不一致!');
        return;
      }
      // debugger;
      var options = this.form;
      this.isLoading = true;
      this.$API.user.updatePass(options).then((res) => {
        if (!res.code) {
          this.$toast('修改成功!');
          this.type === 2 && this.$store.dispatch('setUserInfo'); // 更新密码判断
          this.$router.go(-1);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.password-edit {
  .textName {
    background-color: #f1f3f7;
    line-height: 76px;
    padding: 0 40px;
    color: #252525;
  }
  .text {
    padding: 24px 38px 0;
    color: #5f5e5e;
    font-size: 26px;
  }
  .code {
    background: linear-gradient(80deg, #51b3f5 0%, #2560e1 100%);
    border-radius: 50px;
    font-size: 24px;
    padding: 5px 20px;
    display: inline-block;
    color: #fff;
  }
  .code.disable {
    background-color: #dbdee6;
  }
  .password {
    margin-top: 20px;
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom: calc(60px + env(safe-area-inset-bottom));
    left: 60px;
    right: 60px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #111;
      line-height: 40px;
      border: none;
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
